@extends('admin.layout.app')

@section('title', '系統配置')

@section('content')
    <div class="layui-col-lg12">
        <div class="layui-card">
            <div class="layui-card-header">
                字段列表
            </div>
            <div class="layui-card-body">
                <form class="layui-form" id="search-form" action="" onsubmit="return false;">
                    <div class="tool-bar layui-form-item">
                        <div class="layui-inline">
                            <select name="type" >
                                <option value="">全部</option>
                                @foreach (($types??[]) as $type)
                                    @if (request('type') == $type) <option value="{{$type}}" selected>{{$type}}</option>
                                    @else <option value="{{$type}}">{{$type}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="layui-inline">
                            <input class="layui-input" name="keyword" id="keyword" autocomplete="off" placeholder="輸入搜索的關鍵字">
                        </div>
                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <button class="layui-btn" data-type="reload" title="搜索">
                                    <i class="layui-icon layui-icon-search"></i>
                                </button>
                                <a class="layui-btn add" href="javascript:;" data-url="@broute('setting.create')" title="增加設置">
                                    <i class="layui-icon layui-icon-add-1"></i> 
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
                
                <table class="layui-hide" id="lst" lay-filter="tb"></table> 

                <script type="text/html" id="toolbar">
                    <a class="layui-btn layui-btn-xs edit" lay-event="edit" href="javascript:;" data-url="@broute('setting.edit', '@{{d.id}}')" title="編輯配置">
                        <i class="layui-icon layui-icon-edit"></i>
                    </a>
                </script>
                <div class="tool-bar layui-form-item">
                    <a class="layui-btn layui-btn-danger" data-type="delete">
                        <i class="layui-icon layui-icon-delete"></i>
                        批量刪除
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
layui.use('table', function(){
    var table = layui.table;
    
    //方法級渲染
    table.render({
        elem: '#lst'
        , url: "@broute('setting.index')"
        , skin: 'line'
        , even: true
        , cols: [[
            {checkbox: true}
            , {field:'id', title: 'ID', width:80, sort: false}
            , {field:'type', title: '配置類型', width:150}
            , {field:'name', title: '配置項', width:150}
            , {field:'value', title: '配置值'}
            , {field:'description', title: '説明'}
            , {field:'call_at_php', title: '調用方式', width:200}
            , {field:'call_at_tmpl', title: '模板調用', width:200}
            , {width:100, align:'center', toolbar: '#toolbar'}
        ]]
        , id: 'table'
        , page: true
        , limit: 20
        , loading: true
    });
    
    var $ = layui.$, active = {
        reload: function() {
            // 執行重載
            table.reload('table', {
                page: { curr: 1 }
                , where: $('#search-form').serializeJSON()
            });
        },
        delete: function() {
            var checkStatus = table.checkStatus('table')
                , checked = checkStatus.data
                , id = [];
            $.map(checked, function (k, v) {
                id.push(k.id);
            });
            var data = {
                id: id,
            };
            $.ajax({
                url: "@broute('setting.delete')",
                type: 'post',
                data: data,
            }).done(function(data) {
                if (!data.status) {
                    layer.msg(data.message, function() {});
                    return;
                }
                layer.msg(data.message);
                active['reload'].call(this);
            }).fail(function(jqXHR, textStatus) {
                // 友好提示
                layer.msg(jqXHR.responseJSON.message || jqXHR.responseText);
            });
        }
    };

    $('.tool-bar .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    $(document).on('click', '.add, .edit', function (e) {
        var url   = $(this).attr('data-url');
        var title = $(this).html() + $(this).attr('title');
        layer.open({
            type: 2,
            title: title,
            content: url,
            //   maxmin: true,
            area: ['500px', '460px'],
            btn: ['確定', '取消'],
            yes: function(index, layero) {
                var iframeWindow = window['layui-layer-iframe'+ index],
                submitID = 'LAY-user-front-submit',
                submit   = layero.find('iframe').contents().find('#'+ submitID);

                //監聽提交
                iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                    var url   = data.form.action;
                    var field = data.field; //獲取提交的字段
                    
                    //提交 Ajax 成功後，靜態更新表格中的數據
                    $.ajax({
                        url: url,
                        type: 'post',
                        data: field,
                        dataType: 'json',
                        success: function(json) {
                            if (!json.status) {
                                layer.msg(json.message||'error', function() {});
                                return;
                            }
                            layer.msg(json.message);
                            setTimeout(function() {
                                layer.close(index); //關閉彈層
                                // window.location.reload();
                                active['reload'].call(this)
                            }, 1000);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            layer.msg(jqXHR.responseJSON.data[0] || jqXHR.responseJSON.message, function () {});
                        }
                    });
                });  
                
                submit.trigger('click');
            }
        }); 
    });
});
</script>
@endsection